<template>
  <div class="wrap">
    <div class="top-banner"></div>
    <div class="container">
      <div class="step">
        <router-link to="/holdall">
          <span class="active">工具箱</span>
        </router-link>&nbsp;&nbsp;
        <span>/</span>&nbsp;&nbsp;
        <router-link to="/name_grade">
          <span>姓名打分</span>
        </router-link>
      </div>
      <tips></tips>
      <div class="c-content">
        <div style="max-width: 700px;margin: auto;">
          <el-row class="sex-box">
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/boy.png"
                     @click="ruleForm.sex = 1" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 1" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 1 ? 'active' : '']">男</div>
            </el-col>
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/girl.png"
                     @click="ruleForm.sex = 0" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 0" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 0 ? 'active' : '']">女</div>
            </el-col>
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/weizhi.png"
                     @click="ruleForm.sex = 3" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 3" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 3 ? 'active' : '']">未知</div>
            </el-col>
          </el-row>
          <el-form :model="ruleForm"
                   class="userSignForm demo-ruleForm"
                   ref="ruleForm"
                   :rules="rules"
                   style="padding-top: 40px;"
                   :label-position="labelPosition"
                   :label-width="lWidth">
            <el-row>
              <el-col :span="24"
                      :sm="7">
                <el-form-item label="姓"
                              prop="firstName"
                              required>
                  <el-input class="len w-100"
                            placeholder="请输入姓"
                            v-model.trim="ruleForm.firstName"
                            type="text"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24"
                      :sm="12">
                <el-form-item label="名"
                              prop="lastName"
                              required>
                  <el-input class="len input w-100"
                            placeholder="请输入名"
                            style="width: 80%;"
                            v-model.trim="ruleForm.lastName"
                            type="text"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="datas"
                              label="出生日期">
                  <el-select placeholder="请选择"
                             style="margin-right:10px;"
                             class="w-100 w-202"
                             v-model="ruleForm.timeType">
                    <el-option v-for="item in timeType"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                  <el-date-picker class="w-100 w-202"
                                  type="datetime"
                                  format="yyyy-MM-dd HH:mm"
                                  placeholder="选择日期时间"
                                  v-model="ruleForm.birthday"
                                  @change="dateChange"
                                  value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item v-if="!this.$store.state.isIos">
                  <el-input style="margin-right:10px;"
                            class="len w-100 w-202"
                            type="text"
                            disabled
                            placeholder="选择日期时间"
                            autocomplete="off"
                            v-model="disabledTimeType"></el-input>
                  <el-input class="len w-100 w-202"
                            type="text"
                            disabled
                            placeholder="选择日期时间"
                            autocomplete="off"
                            v-model="ruleForm.anotherDate">
                    <i slot="prefix"
                       class="el-input__icon el-icon-time"></i>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <div class="b">
                <div class="sumbit-btn"
                     @click="submitForm">提 交</div>
                <vip-count></vip-count>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import calendar from "../sign/lib/timer.js";
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    var firstName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入姓!"));
      }
      if (
        (value != "" && value.length != 1) ||
        !/^[\u4e00-\u9fa5]+$/.test(value)
      ) {
        callback(new Error("只能输入1个汉字!"));
      } else {
        callback();
      }
    };
    var birthday = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择小孩生日!"));
      } else {
        callback();
      }
    };
    var lastName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入名!"));
      }
      if (
        (value != "" && value.length > 2) ||
        !/^[\u4e00-\u9fa5]+$/.test(value)
      ) {
        callback(new Error("只能输入2个汉字!"));
      } else {
        callback();
      }
    };
    return {
      timeType: [
        {
          value: 1,
          label: "公历"
        },
        {
          value: 0,
          label: "农历"
        }
      ],
      ruleForm: {
        firstName: "", // 姓氏
        lastName: "", //名
        sex: 1,
        timeType: 1,
        anotherDate: "",
        birthday: ""
      },
      rules: {
        firstName: [
          {
            validator: firstName,
            trigger: "blur"
          }
        ],
        lastName: [
          {
            validator: lastName,
            trigger: "blur"
          }
        ]
      },
      labelPosition: "right",
      lWidth: "80px"
    };
  },
  mounted () {
    _MEIQIA('hidePanel');
    let w = window.innerWidth;
    if (w > 450) {
      this.labelPosition = "right";
      this.lWidth = "80px";
    } else {
      this.labelPosition = "top";
      this.lWidth = "6em";
    }
  },
  computed: {
    disabledTimeType () {
      if (this.ruleForm.timeType == 1) return "农历";
      else return "公历";
    },
    nongli () {
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + "-";
      let M =
        (nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1) + "-";
      let Ys = nows.getFullYear();
      let Ms =
        nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1;
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);

      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.datas == 1) {
        //return "农历  " +  timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay+" "+h+":"+m+":"+s;
        return "农历  ";
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        //return "公历  " + aaa.cYear + '-'+ aaa.cMonth + '-' + aaa.cDay+" "+h+":"+m+":"+s;
        return "公历  ";
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }
    },
    gongli () {
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear() + "-";
      let M =
        (nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1) + "-";
      let Ys = nows.getFullYear();
      let Ms =
        nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1;
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      return "";
    },
    texts () {
      if (this.ruleForm.datas == 1) {
        return "公历/农历";
      } else {
        return "农历/公历";
      }
    },
    isReverse () {
      if (this.ruleForm.datas == 1) {
        return false;
      } else {
        return true;
      }
    }
  },
  created () {
    let name_grade_info = localStorage.getItem("name_grade_info");
    if (name_grade_info) {
      localStorage.removeItem("name_grade_info");
      name_grade_info = JSON.parse(name_grade_info);
      this.ruleForm = name_grade_info;
    }
  },
  methods: {
    // 提交表单
    submitForm (formName) {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.ruleForm.timeType == 0) {
            [this.ruleForm.birthday, this.ruleForm.anotherDate] = [
              this.ruleForm.anotherDate,
              this.ruleForm.birthday
            ];
          }
          if (this.ruleForm.birthday == "") {
            return this.$message.error("请填写出生日期");
          }
          // 如果没有登录，跳转登录
          if (!localStorage.getItem("key")) {
            this.$confirm(
              "您需要登录后才能查询，是否登录后再返回此页？页面信息会保留",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).then(() => {
              // 保存本地信息
              localStorage.setItem(
                "name_grade_info",
                JSON.stringify(this.ruleForm)
              );
              this.$router.push({
                path: "/userlogin",
                query: {
                  jump_path: "/name_grade"
                }
              });
            });
            return;
          }
          if (this.$store.state.count == 0 && this.$store.state.show != true) {
            this.$confirm(
              "您的本月免费次数已用完，请升级会员享受无限次数查询！",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).then(() => {
              // 保存本地信息
              this.$router.push({
                path: "/vip_pay"
              });
            });
            return;
          }
          this.$router.push({
            name: "grade_detail",
            query: this.ruleForm
          });
        } else {
          return false;
        }
      });
    },
    // 选择日期
    dateChange (val) {
      if (this.$store.state.isIos) {
        return;
      }
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear() + "-";
      let M =
        (nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1) + "-";
      let Ys = nows.getFullYear();
      let Ms =
        nows.getMonth() + 1 < 10
          ? "0" + (nows.getMonth() + 1)
          : nows.getMonth() + 1;
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);
      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.timeType == 1) {
        //return "公历  " +  timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate =
          timer.lunarYear +
          "-" +
          timer.lunarMonth +
          "-" +
          timer.lunarDay +
          " " +
          (h < 10 ? "0" + h : h) +
          ":" +
          (m < 10 ? "0" + m : m);
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        ///return "农历  " + timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate =
          aaa.cYear +
          "-" +
          aaa.cMonth +
          "-" +
          aaa.cDay +
          " " +
          (h < 10 ? "0" + h : h) +
          ":" +
          (m < 10 ? "0" + m : m);
      }
    },
    getLunarDate (date) {
      // 阳历转农历

      var lunar = {
        tg: "甲乙丙丁戊己庚辛壬癸",
        dz: "子丑寅卯辰巳午未申酉戌亥",
        number: "一二三四五六七八九十",
        year: "鼠牛虎兔龙蛇马羊猴鸡狗猪",
        month: "正二三四五六七八九十冬腊",
        monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
        calendar: [
          0xa4b,
          0x5164b,
          0x6a5,
          0x6d4,
          0x415b5,
          0x2b6,
          0x957,
          0x2092f,
          0x497,
          0x60c96,
          0xd4a,
          0xea5,
          0x50da9,
          0x5ad,
          0x2b6,
          0x3126e,
          0x92e,
          0x7192d,
          0xc95,
          0xd4a,
          0x61b4a,
          0xb55,
          0x56a,
          0x4155b,
          0x25d,
          0x92d,
          0x2192b,
          0xa95,
          0x71695,
          0x6ca,
          0xb55,
          0x50ab5,
          0x4da,
          0xa5b,
          0x30a57,
          0x52b,
          0x8152a,
          0xe95,
          0x6aa,
          0x615aa,
          0xab5,
          0x4b6,
          0x414ae,
          0xa57,
          0x526,
          0x31d26,
          0xd95,
          0x70b55,
          0x56a,
          0x96d,
          0x5095d,
          0x4ad,
          0xa4d,
          0x41a4d,
          0xd25,
          0x81aa5,
          0xb54,
          0xb6a,
          0x612da,
          0x95b,
          0x49b,
          0x41497,
          0xa4b,
          0xa164b,
          0x6a5,
          0x6d4,
          0x615b4,
          0xab6,
          0x957,
          0x5092f,
          0x497,
          0x64b,
          0x30d4a,
          0xea5,
          0x80d65,
          0x5ac,
          0xab6,
          0x5126d,
          0x92e,
          0xc96,
          0x41a95,
          0xd4a,
          0xda5,
          0x20b55,
          0x56a,
          0x7155b,
          0x25d,
          0x92d,
          0x5192b,
          0xa95,
          0xb4a,
          0x416aa,
          0xad5,
          0x90ab5,
          0x4ba,
          0xa5b,
          0x60a57,
          0x52b,
          0xa93,
          0x40e95
        ]
      };

      var year, month, day;
      if (!date) {
        (date = new Date()),
          (year = date.getFullYear()),
          (month = date.getMonth()),
          (day = date.getDate());
      } else {
        (date = date.split("-")),
          (year = parseInt(date[0])),
          (month = date[1] - 1),
          (day = parseInt(date[2]));
      }

      if (year < 1921 || year > 2020) {
        return {};
      }

      var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
      var isEnd = false;
      var tmp = year;
      if (tmp < 1900) {
        tmp += 1900;
      }
      total =
        (tmp - 1921) * 365 +
        Math.floor((tmp - 1921) / 4) +
        lunar.monthadd[month] +
        day -
        38;
      if (year % 4 == 0 && month > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = lunar.calendar[m] < 0xfff ? 11 : 12;
        for (n = k; n >= 0; n--) {
          bit = (lunar.calendar[m] >> n) & 1;
          if (total <= 29 + bit) {
            isEnd = true;
            break;
          }
          total = total - 29 - bit;
        }
        if (isEnd) break;
      }
      lunarYear = 1921 + m;
      lunarMonth = k - n + 1;
      lunarDay = total;
      if (k == 12) {
        if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth = 1 - lunarMonth;
        }
        if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth--;
        }
      }

      return {
        lunarYear: lunarYear,
        lunarMonth: lunarMonth,
        lunarDay: lunarDay
      };
    }
  }
};
</script>

<style scoped>
.wrap {
  font-size: 16px;
  background-color: rgb(241, 242, 249);
  color: #555;
  padding-bottom: 50px;
}
@media screen and (min-width: 0px) and (max-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/nameGrade-phone.png) no-repeat;
    background-size: 100% 120px;
    height: 120px;
    width: 100%;
    background-position: center;
  }
}
@media (min-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/nameGrade.png) no-repeat;
    height: 120px;
    background-size: 100% 120px;
    width: 100%;
    background-position: center;
  }
}

.step {
  padding: 25px 0;
}

.step .active {
  color: rgb(56, 81, 210);
}

.step span {
  color: #888;
}

.c-content {
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  min-height: 450px;
  padding-top: 50px;
}
.w-202 {
  width: 202px !important;
}
.input {
  width: 200px !important;
}
@media screen and (max-width: 450px) {
  .c-content {
    border-radius: 10px;
    background-color: #fff;
    padding: 10px !important;
    min-height: 500px !important;
  }
  .w-100 {
    width: 100% !important;
  }
  .sumbit-btn {
    width: 100% !important;
  }
}
.icon-wrap {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.icon-wrap .icon {
  width: 100%;
  min-height: 100%;
}

.icon-wrap .choose {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
}

.sex-box .col-grid {
  text-align: center;
}

.sex-box .col-grid .sex {
  margin-top: 15px;
}

.sex-box .col-grid .sex.active {
  color: rgb(65, 81, 210);
}

.sumbit-btn {
  color: #fff;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  width: 300px;
  background-color: rgb(56, 81, 210);
}
</style>
